<template>
    <div class="title">
        <a-typography-title :level="2">{{ title }}</a-typography-title>
    </div>
</template>

<script lang="ts">
import { watch, ref } from 'vue';
import { useRoute } from 'vue-router'
export default {
    setup() {
        const route = useRoute()
        const title = ref<string | undefined>(route.meta?.title)
        watch(
            () => route.meta.title,
            newValue => title.value = newValue
        );
        return {
            title
        }
    }
}
</script>
<style lang="scss" scoped>
.title {
    height: 100%;
    display: flex;
    align-items: center;

    :deep(h2) {
        margin: 0;
        line-height: normal;
    }
}
</style>
